<template>
    <div>
        <ul ref="ul">
            <li > <router-link ref="li"  to="/contacts/Bob">Bob</router-link> </li>
            <li > <router-link ref="li"  to="/contacts/Alice">Alice</router-link>  </li>
            <li > <router-link ref="li"  to="/contacts/All_contacts">All_contacts</router-link>  </li>
        </ul>
        <br>
        <button @click="Random">随机显示</button>
        <br>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name: 'Zuoye3Contacts',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
        Random(){
        //    console.log(this.$refs.ul.children.length); 
      let index = parseInt(Math.random()*this.$refs.ul.children.length) 
      this.$refs.ul.children[index].children[0].click()
            //    console.log(this.$refs.ul.children[index]); 
        }
    },
};
</script>

<style lang="css" scoped>
.router-link-active{
    color: red !important;
}
</style>